<template>
  <section>
    <div class="wrapper">
      <p class="auditStatus">{{obj.status}}</p>

      <h2>{{ obj.applyType == 1 ? "年度困难补助申请" :  obj.applyType == 2 ? "临时困难补助申请" : "" }}</h2>

      <van-field v-model="obj.userName" label="姓名" disabled input-align="right" is-link/>

      <van-field v-model="obj.userSex" label="性别" disabled input-align="right" is-link/>

      <van-field v-model="obj.userAge" label="年龄" disabled input-align="right" is-link/>

      <van-field v-model="obj.politicalStatus" label="政治面貌" disabled input-align="right" is-link/>

      <van-field v-model="obj.idcard" label="身份证号" disabled input-align="right" is-link/>

      <van-field v-model="obj.workStatus" label="职务职称" disabled input-align="right" is-link/>

      <van-field v-model="obj.unionName" label="所属工会" disabled input-align="right" is-link/>

      <van-field v-model="obj.salaryCard" label="工资卡号" disabled input-align="right" is-link/>

      <van-field v-model="obj.telephone" type="tel" label="联系电话" readonly input-align="right" is-link/>

      <van-field v-model="obj.assistLevel" label="申请补助档次" readonly input-align="right" is-link />

      <van-field v-model="obj.reason" label="致困原因" readonly input-align="right" is-link/>

      <van-field v-model="obj.averageIncome" label="家庭年人均收入(元)" readonly input-align="right" is-link />

      <van-field v-model="obj.prevYearLevel" label="上一年度补助档次" readonly input-align="right" is-link/>

      <div class="AUploading">
        <span style="width:48px">附件</span>
        <div>
          <p v-for="item in obj.attachment" ><van-icon name="description" /><a :href="'/api/file/' + item.url" class="mouse" target="_blank">{{ item.originName }}</a></p>
        </div>
      </div>

      <span>家庭主要困难情况</span>

      <van-field
        v-model="obj.situation"
        rows="5"
        autosize
        type="textarea"
        maxlength="300"
        placeholder=""
        show-word-limit
        disabled
      />
<!--      <van-field v-if="!this.urlData.status"  v-model="obj.assistActualLevel" label="最终评审结果" placeholder="请选择" readonly input-align="right" />-->

      <van-field v-if="this.urlData.status" required v-model="obj.assistActualLevel" label="最终评审结果" placeholder="请选择" readonly input-align="right" is-link @click="isSubsidyGrade = true"/>

      <div v-if="this.urlData.status" class="btnBox">
        <button @click="confirm">确定</button>
      </div>

      <!-- 最终评审结果 -->
        <van-popup v-model="isSubsidyGrade" round position="bottom">
          <van-picker
            show-toolbar
            :columns="subsidyGrade"
            @cancel="isSubsidyGrade = false"
            @confirm="selectSG"
          />
        </van-popup>
        <!-- 最终评审结果 end -->
    </div>
  </section>
</template>
<script>
import api from "@/data/api/index.js";

import Vue from "vue";
import { Field } from "vant";
import { Cell } from "vant";
import { Toast } from 'vant';
import "vant/lib/index.css";

Vue.use(Field);
Vue.use(Cell);
Vue.use(Toast);

export default {
  data() {
    return {
      obj: {
        applyType: "",
        userId: "",
        userName: "",
        userSex: "",
        userAge: "",
        salaryCard: "",
        idcard: "",
        workStatus: "",
        department: "",
        telephone: "",
        averageIncome: "",
        assistLevel: "",
        reason: "",
        situation: "",
        status: "0",
        unionId: "",
        unionName: "",
        assistActualLevel: ""
      },
      reasons: ["家庭收入低", "因病致困", "意外致困", "子女上学", "其他"],
      showPicker: false,
      title: "",
      type: "",
      urlData: {},
      isSubsidyGrade: false,
      subsidyGrade: [ "第一档", "第二档","第三档","不予评定"],
    };
  },
  mounted() {
    this.urlData = JSON.parse(this.$route.query.tdata);
    this.getUserInfo()
  },
  methods: {
    // 确定
    confirm(){
      let url='';
      let data = {
        id: this.urlData.id
      };
      if(!this.obj.assistActualLevel?.length > 0){
        Toast("请选择最终评审结果");
        return
      }
      if (this.obj.assistActualLevel == "不予评定") {
        data.status = 3;
      } else {
        data.status = 2;
      }
      data.level = this.obj.assistActualLevel;
      url=(this.obj.applyType=='1')?'finally/year':'finally/temporary'
      api.DHAudit(url,{},data).then(res => {
        if(res.code=="success"){
          Toast("操作成功");
        }else{
          Toast(res.desc);
        }
        this.$router.go(-1)
      });
    },
    // 获取当前用户信息
    getUserInfo() {
      api.myDifficultyDetails(this.urlData.id).then(res=>{
        if(res.userSex!='男' && res.userSex!='女'){
          res.userSex=res.userSex == "01" ?  "男" : "女"
        }
        this.obj = res
        if(this.obj.status=='4'&&this.urlData.status=='audit'){
          this.urlData.status=true
        }
        let statusTxt=['未审核','通过初审','通过终审','未通过','通过二审']
        this.obj.status = statusTxt[this.obj.status]


      })
    },
    // 选择档次
    selectSG(val){
      this.obj.assistActualLevel = val
      this.isSubsidyGrade = false;
    }
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
}
.wrapper {
  padding: 0 4px 10px;
  font-size: 16px;
  box-sizing: border-box;
  background: #fff;
  .auditStatus {
    height: 50px;
    line-height: 50px;
    margin: 0 -4px;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    background: linear-gradient(to right, #feb692, #ea5455);
  }
  h2 {
    display: inline-flex;
    position: relative;
    font-size: 20px;
    margin: 16px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  > span {
    display: block;
    margin: 10px 16px;
    font-size: 14px;
  }
  textarea {
    padding: 5px 10px !important;
    border: 1px solid #d2d2d2 !important;
  }
}
.AUploading{
  padding: 10px 0;
  margin: 0 16px;
  font-size: 14px;
  line-height: 1.5em;
  border-bottom: 1px solid #ebedf0;
  display: flex;
}
.AUploading>div{
  margin-left:10px;
  color:#666
}
.AUploading>div a{
  color:#666;
  padding-left:3px
}
.btnBox{
  padding: 20px 16px 25px;
}
.btnBox button{
  display: block;
  width: 100%;
  height: 53px;
  color: #fff;
  font-size: 20px;
  background-color: #9E0F16;
  border-radius: 28px;
}
</style>
